<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" @click="tabClick" :activeStyle="activeStyle" lineColor="#675f91" :current="current">
				<view slot="right" class="flex mr15" @tap="nav('/food/food?status='+status+'&id='+id)">
					<view class="text-primary">
						窗口明细
					</view>
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</u-tabs>
			<u-line></u-line>
			<template v-if="current == 1 && ((status == 's1_handin' && isManager) || status == 's2_accepted' || status == 's3_rejected' || status == 's4_closed')">
				<u-tabs :list="foodTabs" @click="foodTabClick" :activeStyle="activeStyle" lineColor="#675f91"
					:current="foodCurrent"></u-tabs>
				<u-line></u-line>
			</template>
			<template v-if="current == 1 || current == 2">
				<view class="blank20"></view>
				<u-row justify="space-between" gutter="3">
					<template v-for="col in tabs[current].tableHd">
						<u-col :span="col.span">
							<view class="text-center text-gray font-24">
								{{col.title}}
							</view>
						</u-col>
					</template>
				</u-row>
				<view class="blank20"></view>
				<u-line></u-line>
			</template>
		</u-sticky>
		<!-- current == 0 -->
		<view class="" v-if="current == 0">
			<view class="bgw">
				<view class="blank20"></view>
				<u-steps current="1" dot activeColor="#675f91" inactiveColor="#999999">
					<u-steps-item title="草稿"></u-steps-item>
					<u-steps-item title="已提交"></u-steps-item>
					<u-steps-item title="已批准"></u-steps-item>
					<u-steps-item title="驳回"></u-steps-item>
					<u-steps-item title="已下单"></u-steps-item>
				</u-steps>
				<view class="blank20"></view>
			</view>
			<view class="blank20"></view>
			<purchaseInfo :detail="detail" v-if="detail['单号']"></purchaseInfo>
			
			<template  v-if="status != 's0_draft'">
				<view class="blank30"></view>
				<view class="bgw wrapper">
					<view class="blank20"></view>
					<u-row justify="space-between" gutter="3">
						<u-col span="3">
							<view class="text-center text-gray">
								档口
							</view>
						</u-col>
						<u-col span="3">
							<view class="text-center text-gray">
								单价
							</view>
						</u-col>
						<u-col span="3">
							<view class="text-center text-gray">
								份数
							</view>
						</u-col>
						<u-col span="3">
							<view class="text-center text-gray">
								总金额
							</view>
						</u-col>
					</u-row>
					<view class="blank20"></view>
					<u-line></u-line>
					<template v-for="(v,i) in cus_sub_category">
						<view class="blank20"></view>
						<u-row justify="space-between" gutter="3">
							<u-col span="3">
								<view class="text-center">
									窗口{{i}}
								</view>
							</u-col>
							<u-col span="3">
								<view class="text-center">
									5元/份
								</view>
							</u-col>
							<u-col span="3">
								<view class="text-center">
									800
								</view>
							</u-col>
							<u-col span="3">
								<view class="text-center">
									4000
								</view>
							</u-col>
						</u-row>
						<view class="blank20"></view>
						<u-line dashed></u-line>
					</template>
					<view class="blank20"></view>
					<u-row justify="space-between" gutter="3">
						<u-col span="3">
							<view class="text-center text-gray">
								汇总
							</view>
						</u-col>
						<u-col span="3"></u-col>
						<u-col span="3">
							<view class="text-center">
								3200
							</view>
						</u-col>
						<u-col span="3">
							<view class="text-center">
								4000
							</view>
						</u-col>
					</u-row>
					<view class="blank20"></view>
				</view>
			</template>
			<view class="blank30"></view>
			<view class="bgw wrapper" v-if="steps.length>0">
				<view class="blank30"></view>
				<u-steps :current="steps.length-1" direction="column" activeColor="#675f91" inactiveColor="#999999">
					<template v-for="(v,i) in steps">
						<u-steps-item :title="approve_status_obj[v.status]">
							<view class="" slot="desc">
								<view class="blank20"></view>
								<view class="" >
									【{{v.subject}}】
									<text v-if="v.approve_id[1]">申请人：{{v.approve_id[1]}}</text>
								</view>
								<view class="blank10"></view>
								<view class="">
									备注：{{v.apply_note || '无'}}
								</view>
								<view class="blank10"></view>
								<view class="font-24 text-light-gray">
									{{v.apply_time}}
								</view>
							</view>
						</u-steps-item>
					</template>
					<!-- <u-steps-item title="等待审批"></u-steps-item> -->
					<!-- <u-steps-item title="已下单" desc=""></u-steps-item> -->
				</u-steps>
				<view class="blank30"></view>
			</view>
			<view class="bgw wrapper" v-if="status1 == 's2_accepted' || status1 == 's3_rejected'">
				<view class="blank30"></view>
				<u-steps current="1" direction="column" activeColor="#675f91" inactiveColor="#999999">
					<u-steps-item title="已提交">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								原因：原因文本原因文本原因文本原因文本原因文本
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
						
					</u-steps-item>
					<u-steps-item title="已审批" v-if="status == 's2_accepted'">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								王经理审批通过“土豆、西红柿”等5种食材
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
					</u-steps-item>
					<u-steps-item title="已驳回" v-if="status == 's3_rejected'">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								王经理驳回 “土豆、西红柿”等5种食材
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
					</u-steps-item>
					<!-- <u-steps-item title="已下单" desc=""></u-steps-item> -->
				</u-steps>
				<view class="blank30"></view>
			</view>
			<view class="bgw wrapper" v-if="status1 == 's4_closed'">
				<view class="blank30"></view>
				<u-steps current="2" direction="column" activeColor="#675f91" inactiveColor="#999999">
					<u-steps-item title="已提交">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								原因：原因文本原因文本原因文本原因文本原因文本
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
						
					</u-steps-item>
					<u-steps-item title="已审批">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								王经理审批通过“土豆、西红柿”等5种食材
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
					</u-steps-item>
					<u-steps-item title="已下单">
						<view class="" slot="desc">
							<view class="blank20"></view>
							<view class="" >
								您已下单 “土豆、西红柿”等5种食材
							</view>
							<view class="blank10"></view>
							<view class="font-24 text-light-gray">
								2023.12.12 12:22
							</view>
						</view>
					</u-steps-item>
				</u-steps>
				<view class="blank30"></view>
			</view>
		</view>
		<!-- current == 0 end-->
		<!-- 销售预测-->
		<view class="" v-if="current == 2">
			<view class="bgw">
				<view class="blank20"></view>
				<template v-for="v in 10">
					<u-row justify="space-between" gutter="3">
						<template v-for="col in tabs[current].tableHd">
							<u-col :span="col.span">
								<view class="text-center" :class="col.title == '比例'?'text-red':''">
									{{col.default}}
								</view>
							</u-col>
						</template>
					</u-row>
					<u-line dashed margin="10rpx 0"></u-line>
				</template>
				<u-row justify="space-between" gutter="3">
					<template v-for="(col,i) in tabs[current].tableHd">
						<u-col :span="col.span">
							<view class="text-center  text-gray" v-if="i == 0">
								汇总
							</view>
							<view class="text-center" v-else>
								{{col.default}}
							</view>
						</u-col>
					</template>
				</u-row>
				<view class="blank20"></view>
			</view>
			<view class="wrapper" v-if="status == 's0_draft'">
				<view class="blank20"></view>
				<view class="text-red">
					成本比例超标，建议【提交】时填写原因。
				</view>
				<view class="blank20"></view>
			</view>
		</view>
		<!-- 食材汇总 -->
		<view class="" v-if="current == 1">
			<view class="bgw">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<template v-for="(v,index) in sumed_pr_record">
					<view class="blank20"></view>
					<view class="" v-if="foodCurrent == 0 || foodTabs[foodCurrent].name == v.status">
						<u-row justify="space-between" gutter="3">
							<template v-for="col in tabs[current].tableHd">
								<u-col :span="col.span">
									<view class="text-center" v-if="col.title == '状态'" :class="v.status == '已驳回'?'text-red':v.status == '应下单'?'text-green':'text-gray'">
										{{v.status}}
									</view>
									<view class="text-center" style="padding-left: 15px;" v-else-if="col.title == '食材' && foodCurrent == 1 && isManager">
										<u-checkbox :key="index" :name="index" :label="v[col.key]" activeColor="#675f91" shape="circle"></u-checkbox>
									</view>
									<view class="text-center" style="padding-left: 15px;" v-else-if="col.title == '食材' && foodCurrent == 2">
										<u-checkbox :key="index" :name="index" :label="col.default" activeColor="#675f91" shape="circle"></u-checkbox>
									</view>
									<view class="text-center" v-else>
										{{v[col.key]}}
									</view>
								</u-col>
							</template>
						</u-row>
						<view class="blank20"></view>
						<u-line dashed></u-line>
					</view>
				</template>
				</u-checkbox-group>
			</view>
			<!-- 审批意见 -->
			<template v-if="status == 's1_handin' && isManager && foodCurrent == 1">
				<view class="blank30"></view>
				<view class="bgw">
					<u--textarea border="none" v-model="value" placeholder="请输入审批意见" :count="true"></u--textarea>
				</view>
				<view class="blank30"></view>
			</template>
			<view class="blank30"></view>
			
		</view>	
		<template v-if="foodCurrent == 1 && current == 1 && status == 's1_handin' && isManager">
			<view class="blank"></view>
			<view class="fixed-bottom bgw">
				<u-line></u-line>
				<view class="flex">
					<view class="flex-1" style="padding-left: 15px;">
						<u-checkbox-group placement="column">
							<u-checkbox name="all" label="全选" activeColor="#675f91" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="btn-refuse" @click="refuse">
						拒绝
					</view>
					<view class="btn-allow" @click="allow">
						批准
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="foodCurrent == 2 && current == 1 && (status == 's2_accepted' || status == 's3_rejected' || status == 's4_closed' || isManager)">
			<view class="blank"></view>
			<view class="fixed-bottom bgw">
				<u-line></u-line>
				<view class="flex">
					<view class="flex-1" style="padding-left: 15px;">
						<u-checkbox-group placement="column">
							<u-checkbox name="all" label="全选" activeColor="#675f91" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="btn-confirm" @click="order">
						下单
					</view>
				</view>
			</view>
		</template>
		
		<u-modal :show="modalShow" title="提示" :content='modalContent' :showCancelButton="true" confirmColor="#675f91" @confirm="modalConfirm" @cancel="modalCancel" confirmText="下单"></u-modal>
	</view>
</template>

<script>
	import purchaseInfo from '@/pagesA/components/purchase-info.vue';
	import {
		purchase_request_record,
		purchase_record_detail,
		purchase_record_approve,
		chef_direct_place_po,
		purchase_request_draft,
		purchase_record_handin
	} from '@/common/api.js';
	
	let today = new Date();
	let year_month_day = `${today.getFullYear()}` + `-` + `${today.getMonth()+1}`.padStart(2, '0')+`-` + `${today.getDate()}`.padStart(2, '0');
	
	export default {
		components: {
			purchaseInfo
		},
		data() {
			return {
				checkboxValue:[],
				id: '',
				status: '',
				status1:'',
				note: '',
				titleStyle: {
					color: '#ffffff'
				},
				bgColor: '#675f91',
				activeStyle: {
					color: '#675f91'
				},
				foodCurrent: 0,
				foodTabs: [{
						name: '全部'
					},
					{
						name: '应审批',
						badge: {
						    value: 4
						}
					},
					{
						name: '应下单',
						badge: {
						    value: 4
						}
					},
					{
						name: '已下单'
					},
					{
						name: '已驳回'
					},
				],
				tabs:[],
				current: 0,
				list: [],
				listHead: [],
				page: 0,
				loadstatus: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有了',
				isManager:false,
				modalContent:'',
				modalShow:false,
				
				sumed_pr_record:[],//食材汇总
				month_cost_ratio:[],
				
				need_day:year_month_day,
				cus_sub_category:[],
				material_item:[],
				material_obj:{},
				purchase_record_list:[],
				forecast_list:[],
				valueObj: {},
				isShowCusTabs:false,
				detail:{},
				approve_status_obj:{
					s0_pending:'草稿',
					s1_apply:'请审批',
					s2_approve:'同意',
					s3_reject:'驳回',
				},
				steps:[],
				value:''
			}
		},
		methods: {
			valChange(){
				
			},
			modalConfirm(){
				this.modalShow = false;
				uni.$u.toast('已成功下单');
				// this.foodCurrent = 3;
			},
			modalCancel(){
				this.modalShow = false;
			},
			order(){
				
			},
			refuse(){
				// uni.$u.toast('操作成功');
				this.purchase_record_approve(false);
			},
			allow(){
				// this.modalContent = '已审批成功，是否将‘土豆、西红柿’等5种食材下单？';
				// this.modalShow = true;
				this.purchase_record_approve(true);
			},
			purchase_record_approve(is_approve){
				uni.showLoading({
					title: '加载中'
				});
				purchase_record_approve({
					pr_id:this.id,
					is_approve:is_approve,
					note:this.value
				}).then((res) => {
					uni.$u.toast('操作成功');
					setTimeout(()=>{
						this.getData();
					},2000)
					
				}).catch(() => {
				
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			checkboxChange(n) {
			    console.log('change', n);
			},
			tabClick(e) {
				// console.log(e);
				// console.log(this.current);
				this.current = e.index;
			},
			foodTabClick(e) {
				this.foodCurrent = e.index;
			},
			set_forecast_list(){
				let forecast_list = [];
				for(let id in this.valueObj){
					forecast_list.push({
						cus_sub_id:id,
						sales_qty:this.valueObj[id]
					})
				}
				this.forecast_list = forecast_list;
				let id = this.id;
				uni.setStorage({
					key: 'forecast_list_'+id,
					data: forecast_list,
					success: function () {
						// console.log('success');
					}
				});
			},
			save() {
				this.set_forecast_list();
				purchase_record_handin({
					pr_id:this.id,
					purchase_record_list:this.purchase_record_list,
					forecast_list:this.forecast_list,
					day:this.need_day,
					note:this.note,
				}).then((res) => {
					uni.$u.toast('操作成功');
					setTimeout(()=>{
						if(this.id == 0){
							uni.navigateBack({
								delta: 2
							});
						}else{
							uni.navigateBack({
								delta: 1
							});
						}
					},2000)
					
				}).catch(() => {
					
				
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
				
				
				// setTimeout(() => {
				// 	uni.$u.route({
				// 		type: 'navigateBack'
				// 	})
				// }, 1500);
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				let pr_id = this.id;
				purchase_request_record().then((res) => {
					this.detail = res.result.find(v=> v.id == pr_id);
					this.status = this.detail['状态'];
					this.detail = res.result.find(v => v.id == pr_id);
					this.status = this.detail['状态'];
					if (this.status == 's0_draft') {
						this.nav('/purchaseDetail/purchaseDraft?id=' + pr_id, 'redirect');
						return;
					}
					
					this.cus_sub_category = [{
						id: 1,
						name: '测试'
					}];
					
					let steps = this.detail['审批记录'] || [];
					steps = steps.sort((a,b)=>{
						let time_a = new Date(a.apply_time).getTime();
						let time_b = new Date(b.apply_time).getTime();
						return time_a - time_b
					});
					this.steps = steps;
					
					this.init();
					
				}).catch(() => {
				
				}).finally(() => {
					
				})
				purchase_record_detail({
					pr_id:pr_id
				}).then((res) => {
					// this.list = res.result;
					let { sumed_pr_record,month_cost_ratio } = res.result;
					sumed_pr_record.forEach(v=>{
						v.mm_id_1 = v.mm_id[1];
						v.supplier_id_1 = v.supplier_id[1];
						v.price = v.purchase_unit_price + '/' + v.purchase_unit_id[1];
						v.status = '应审批'
					})
					
					this.sumed_pr_record = sumed_pr_record;
					this.month_cost_ratio = month_cost_ratio;
				}).catch(() => {

				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
				
				
				// chef_direct_place_po({
				// 	pr_id:pr_id
				// }).then((res) => {
				// 	if(!res.result) return;
				// }).catch(() => {
				
				// }).finally(() => {
					
				// })
				
			},
			// 弃用
			getData0() {
				uni.showLoading({
					title: '加载中'
				});
				purchase_request_draft({
					need_day:this.need_day
				}).then((res) => {
					let { material_item,cus_sub_category} = res.result;
				
					this.material_item = material_item;

					this.isShowCusTabs = cus_sub_category.length > 0;
					if(this.isShowCusTabs){
						this.cus_sub_category = cus_sub_category;
					}else{
						this.cus_sub_category = [{id:0,name:'默认'}];
					}
					this.cus_sub_category.forEach(v=>{
						this.valueObj[v.id] = 100
					})
					let material_obj = {};
					
					material_item.forEach(v=>{
						material_obj[v.id] = v;
					})
					// console.log(material_tree);
					this.material_obj = material_obj;
			
				}).catch(() => {
			
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			
			},
			init(){
				let pr_id = this.id;
				
				if(this.status == 's1_handin'){
					this.current = 1;
					this.foodCurrent = 1;
				}else{
					this.current = 0;
					this.foodCurrent = 0;
				}
				this.tabs = [{
						name: '详情',
					},
					{
						name: '食材汇总',
						id: 2,
						tableHd: [
							{
								title: '食材',
								key:'mm_id_1',
								default: '土豆',
								span: 3
							},
							{
								title: '单价',
								key:'price',
								default: '1元/斤',
								span: 2
							},
							{
								title: '下单',
								key:'purchase_unit_qty',
								default: '200',
								span: 2
							},
							{
								title: '供应商',
								key:'supplier_id_1',
								default: '供应商SSS',
								span: 3
							}
						]
					},
					{
						name: '销售预测',
						id: 1,
						tableHd: [{
								title: '分类',
								default: '蔬菜',
								span: 4
							},
							{
								title: '金额',
								default: '200',
								span: 2
							},
							{
								title: '比例',
								default: '25.0%',
								span: 2,
							},
							{
								title: '标准',
								default: '23%',
								span: 2
							},
							{
								title: '本月度',
								default: '0%',
								span: 2
							},
						]
					}
				];
				
				if((this.status == 's1_handin' && this.isManager) || this.status == 's2_accepted' || this.status == 's3_rejected'){
					this.tabs[2].tableHd.push({
						title: '状态',
						default: '无',
						span: 2
					});
				}
			}
		},
		onLoad(d) {
			// console.log(d);
			// d.options
			// let status = '';
			// if (d.status) {
			// 	switch (d.status) {
			// 		case "1":
			// 			status = '已提交'
			// 			break;
			// 		case "2":
			// 			status = '草稿'
			// 			break;
			// 		case "3":
			// 			status = '已批准'
			// 			break;
			// 		case "4":
			// 			status = '驳回'
			// 			break;
			// 		default:
			// 			status = '关闭'
			// 	};
			// }
			// this.status = d.status || 's0_draft';
			this.id = Number(d.id) || 1;
			// this.isManager = !!d.isManager;
			this.isManager = true;
			
			this.getData();
			
		},
		onShow() {

		},
		onReady() {

		},
		onPullDownRefresh() {
			// this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.blank {
		height: calc(60rpx + 40px);
	}
	.btn-refuse{
		height: 90upx;
		line-height: 90upx;
		width: 200upx;
		text-align: center;
		background-color: #E40A0C;
		color: #ffffff;
	}
	.btn-allow{
		height: 90upx;
		line-height: 90upx;
		width: 200upx;
		text-align: center;
		background-color: #00AD2E;
		color: #ffffff;
	}
	.btn-confirm{
		height: 90upx;
		line-height: 90upx;
		width: 200upx;
		text-align: center;
		background-color: #675f91;
		color: #ffffff;
	}
</style>